<template>
  <div class="oriderDetails">
    <!-- eslint-disable -->
    <Scroll ref="scroll">
      <router-link tag="div" replace :to="{path: `/address/addressList/${orderInfo.id}?fullPath=${encodeURIComponent(this.$route.fullPath)}`}" class="address oriderBox">
        <div class="position"></div>
        <div class="info">
          <div class="name-mobile">
            <span>{{addressData.consignee}}</span>
            <span>{{addressData.mobile}}</span>
          </div>
          <div class="address-info">
            <span>地址：{{addressData.detailedAddress}}</span>
          </div>
        </div>
        <div class="arrow">
          <i class="icon-arrow"></i>
        </div>
      </router-link>

      <div class="goods-info oriderBox">
        <div class="pic">
          <img class="picItem" :src="information.thumbnail  | ImgFilter" alt="img">
        </div>
        <div class="title">
          <span>{{information.name}}</span>
        </div>
        <span class="jiage">￥{{orderInfo.price}}</span>
        <span class="number">×{{orderInfo.buyNumber}}</span>
      </div>
      <div class="Deposit">
        <p class="ding"> <span>商品定金</span> <span> <i>￥{{(+orderInfo.pricing * orderInfo.buyNumber) | pointFilter}}</i></span></p>
        <p class="wei"><span>商品尾款<i style="font-size: .3rem;font-style: normal;">(请于预测结果公布后{{(times/60).toFixed(0)}}小时内支付)</i> </span><span>￥{{(orderInfo.tailSection * orderInfo.buyNumber) | pointFilter}}</span> </p>
        <p class="wei"> <span>商品运费</span> <span> ￥{{(information.postage * orderInfo.buyNumber) | pointFilter}}</span></p>
      </div>
      <div class="myNumber">
        <span>我的预测码</span>
        <span>{{orderInfo.number}}</span>
      </div>
    </Scroll>
    <div class="footerButtom" :class="{'iPhonex': isIphonex}" ref="footer">
      <div class="Agreement">
        <div class="iconBox" @click="checkout()">
          <div :class="['icon', {'yesIcon' : isgou}]" >
        </div>
        </div>
        <div class="text" @click="aa">
          <p><span>同意疯狂折扣活动规则</span>(定金不退还)</p>
          <p>确认订单后请在{{timeNext}}分钟内完成支付</p>
        </div>
      </div>
      <div class="footer">
        <div class="box">
          <div class="momey">
            <span>￥{{(orderInfo.pricing*orderInfo.buyNumber) | pointFilter}}</span>
            <span class="freight">待付款</span>
          </div>
          <button :class="{buy:true,okbuy:isgou}" @click="handlePayment">付款</button>
        </div>
      </div>
    </div>
    <Popups :isShow.sync="isPopup_payment"  :delayTime="popTip.delayTime || 0" :title="popTip.title">
      <div  :class="['cancel-info', popTip.type === 1 ? 'info-center' : null]" slot="body">
        <Scroll ref="scroll_pop" style="height: 5rem;overflow: hidden;overflow-y: scroll;">
          <span v-html="agreement">
          </span>
        </Scroll>
      </div>
      <div slot="footer" class="pop-footer-btns">
        <button class="pop-footer-close" @click="goMyBuy" >确定</button>
      </div>
    </Popups>
  </div>
</template>
<script>
import href from "@/mixins/href";
import Ajax from "@/mixins/ajax";
import { Popups } from "~/popOut";
import { Scroll } from "~/vScroll";

const successPayment = {
  title: "疯狂折扣活动规则",
  type: 1,
  info: ""
};

// 马上买
const quickBuyUrl = "/card-service-web/address/queryAddressList";
// 支付宝支付接口
const alipayUrl = "/card-service-web/alipay/aliPayOnePercent";
// 创建订单
const createOrders = "/card-service-web/onePercent/buyGoods";
// 默认地址
const moren = "/card-service-web//address/getUserDefaultAddressById";
// 商品详情
const commodity = "/card-service-web/onePercent/queryMallDetail";
// 优众协议
const xieyi = "/card-service-web/onePercent/orderMoneyExplain";
// 尾款时间
const timeUrl = "/card-service-web/onePercent/explainTailPay";
export default {
  name: "MakeSureOrder",
  mixins: [Ajax, href],
  components: {
    Popups,
    Scroll
  },
  filters: {
    postageFilter(value) {
      let result = "";
      if (!isNaN(value) && +value !== 0) {
        result = `(含${+value}元运费)`;
      } else {
        result = "免运费";
      }
      return result;
    }
  },
  data() {
    // 定金， 可抵扣金额， 尾款金额，购买数量, 售价， 预测的号码
    const {
      pricing,
      deduction,
      tailSection,
      buyNumber,
      price,
      number,
      productId,
      saleId,
      sizeId
    } = this.$route.query;
    return {
      // 支付方式-----支付宝: 1
      payType: 1,
      // 总金额
      totalAmout: 0,
      alipayHtml: "",
      isPopup_payment: false,
      // 支付成功提示
      popTip: successPayment,
      // 默认收货地址
      addressData: {},
      // 是否勾选
      isgou: false,
      // 创建订单参数
      params: {},
      // 支付参数
      payment: {},
      // 商品信息
      information: {},
      // 优众协议
      agreement: "",
      // 尾款时间
      times: 0,
      timeNext: 0,
      // 登录弹框
      islogin: false,
      // 订单详情信息
      orderInfo: {
        // 定金金额
        pricing,
        // 可抵扣金额
        deduction,
        // 尾款金额
        tailSection,
        // 购买数量
        buyNumber,
        // 售价
        price,
        // 预测的号码
        number,
        // 商品id
        productId,
        // 尺码id
        sizeId,
        // 折扣id
        saleId
      },
      // 是否为iPhone X
      isIphonex: false
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 请求马上买
      vm.handleBuy(to.query, to, from);
    });
  },
  beforeRouteLeave(to, from, next) {
    /* eslint-disable */
    to.meta.keepAlive = true;
    next();
  },
  mounted() {
    this.iphoneType();
    // 设置带底部bar
    const windowHeight = this.getHeight();
    /* eslint-disable */
    const headerEl = document.querySelector("#header");
    const footer = this.$refs.footer;
    const headerElHeight = this.getElHeight(headerEl);
    const footerHeight = this.getElHeight(footer);
    this.mainHeight = windowHeight - (headerElHeight + footerHeight);
    // 设置scroll在详情页的高度
    this.$nextTick(() => {
      // 刷新滚动区域内容高度
      this.$refs.scroll.refresh();
    });
    // 支付成功判断
    if (sessionStorage.getItem("orderInfo") === null) {
      sessionStorage.setItem("orderInfo", JSON.stringify(this.orderInfo));
    }
    if (this.orderInfo.number === undefined) {
      this.orderInfo = JSON.parse(sessionStorage.getItem("orderInfo"));
    }
    this.post(commodity, {
      productId: this.orderInfo.productId
    }).then(body => {
      this.information = body.execData;
      this.$nextTick(() => {
        // 刷新滚动区域内容高度
        this.$refs.scroll.refresh();
      });
    });

    this.post(timeUrl).then(body => {
      this.times = body.execData.explainTailPay;
      this.timeNext = body.execData.explainTailRward;
    });
    this.get(xieyi).then(body => {
      this.agreement = body.execData.explain;
    });
    const { totalAmout } = this.$route.query;
    if (totalAmout) {
      this.isPopup_payment = true;
    }
  },
  methods: {
    // 判断是否为iPhone X
    iphoneType() {
      var u = navigator.userAgent;
      if (!(u.indexOf("Android") > -1 || u.indexOf("Adr") > -1)) {
        if (window.screen.height == 812) {
          this.isIphonex = true;
        }
      }
    },
    /* eslint-disable */
    goMyBuy() {
      this.isPopup_payment = false;
    },
    handlePayment() {
      if (this.isgou === true) {
        this.params.addressId = this.addressData.addressId;
        this.params.productId = this.orderInfo.productId;
        this.params.counts = this.orderInfo.buyNumber;
        this.params.strategys = this.orderInfo.saleId;
        this.params.nums = this.orderInfo.number;
        this.params.specification = this.orderInfo.sizeId;
        this.post(createOrders, this.params).then(body => {
          // 商户网站唯一订单号
          this.payment.outTradeNo = body.execData.orderNum;
          // 商品的标题
          this.payment.subject = body.execData.productName;
          // 订单总金额
          this.payment.totalAmout = body.execData.onePrice;
          // 同步地址
          this.payment.returnUrl = `${window.location.host + "/Payment"}`;
          // 支付描述
          this.payment.body = "battleProductsName";
          const token = this.getToken();
          const href = `${alipayUrl}?body=${
            this.payment.outTradeNo
          }&outTradeNo=${this.payment.outTradeNo}&subject=${
            this.payment.outTradeNo
          }&totalAmout=${
            this.payment.totalAmout
          }&returnUrl=${encodeURIComponent(
            `http://${
              window.location.host
            }/?newToken=${token}#/Payment?outTradeNo=${body.execData.orderId}`
          )}`;
          //console.log(href)
          //location.href = href;
          this.openWith(href);
        });
      }
    },
    checkout() {
      this.isgou = !this.isgou;
    },
    aa() {
      this.isPopup_payment = true;
      this.$nextTick(() => {
        this.$refs.scroll_pop.refresh();
      });
    },
    handleBuy({ mallResllId, sellUserId }, to) {
      if (this.$route.query.addressId == undefined) {
        this.post(moren).then(data => {
          if (data.execErrCode == 1140) {
            this.post(quickBuyUrl).then(body => {
              // console.log(body.execDatas.length)
              if (body.execDatas.length > 0) {
                this.addressData = body.execDatas[0];
                for (var i = 0; i < body.execDatas.length; i++) {
                  if (
                    body.execDatas[i].addressId == this.$route.query.addressId
                  ) {
                    this.addressData = body.execDatas[i];
                  }
                }
              } else {
                this.$router.replace(
                  `/address/joinAddress?defaultStatus=1&fullPath=${encodeURIComponent(
                    to.fullPath
                  )}`
                );
              }
            });
          } else {
            //有默认地址
            this.addressData = data.execData;
          }
          // console.log(body.execDatas.length)
        });
      } else {
        this.post(quickBuyUrl).then(body => {
          // console.log(body.execDatas.length)
          if (body.execDatas.length > 0) {
            for (var i = 0; i < body.execDatas.length; i++) {
              if (body.execDatas[i].addressId == this.$route.query.addressId) {
                this.addressData = body.execDatas[i];
              }
            }
          }
        });
      }
    },
    handleSelectPay(type) {
      this.payType = type;
    }
  }
};
</script>
<style scoped>
.oriderDetails {
  width: auto;
  position: absolute;
  top: 1.51rem;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f5f5f4;
}
.oriderBox {
  background: #fff;
  margin-bottom: 0.45rem;
  position: relative;
}
.address {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.45rem 0.48rem 0.46rem 0.58rem;
}
.address .position {
  width: 0.51rem;
  height: 0.7rem;
  background: url("../../assets/img/position.png") no-repeat;
  background-size: 100%;
  margin-right: 0.41rem;
}
.address .info {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.address .info .name-mobile {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 0.54rem;
  font-size: 0.48rem;
}
.address .info .address-info {
  font-size: 0.42rem;
  color: #8e8e8e;
}
.address .arrow {
  margin-left: 0.37rem;
}
.address .arrow .icon-arrow {
  display: inline-block;
  width: 0.24rem;
  height: 0.43rem;
  background: url("../../assets/img/arrow.png") no-repeat;
  background-size: 100%;
}
.payment .title {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  height: 1.32rem;
  padding: 0 0.49rem;
  font-size: 0.48rem;
  border-bottom: 0.01rem solid #e1e1e1;
}
.payment .title .icon-payment {
  width: 0.69rem;
  height: 0.6rem;
  background: url("../../assets/img/payment.png") no-repeat;
  background-size: 100%;
  margin-right: 0.34rem;
}
.pay-item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.45rem 0.49rem 0.45rem 1.54rem;
  border-bottom: 0.01rem solid #ccc;
}
.pay-item .apliy {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
}
.pay-item .apliy .icon-apliy {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  background: url("../../assets/img/apliy.png") no-repeat;
  background-size: 100%;
  margin-right: 0.29rem;
}
.pay-item .checkbox {
  width: 0.54rem;
  height: 0.54rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.pay-item .checked {
  background-image: url("../../assets/img/checked.png");
}
.pay-item .check {
  background-image: url("../../assets/img/check.png");
}
.goods-info {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.45rem 0.48rem;
  margin-bottom: 0;
  border-bottom: 1px solid #ccc;
}
.goods-info .title {
  max-width: 6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: -1rem;
}
.goods-info .pic {
  width: 1.8rem;
  height: 1.8rem;
  overflow: hidden;
  margin-right: 0.28rem;
  background-color: #d0d0d0;
}
.goods-info .pic .picItem {
  width: 1.8rem;
  height: 1.8rem;
}
.footer {
  /* position: fixed;
  right: 0;
  bottom: 0;
  left: 0; */
}
.footerButtom.iPhonex {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.footerButtom.iPhonex .footer {
  padding-bottom: 0.6rem;
  background: #fff;
}
.footer .box {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  height: 1rem;
  background: #fff;
  padding: 0.25rem 0.48rem;
  box-shadow: 0rem -0.01rem 0rem 0rem #c8c7cc;
}
.footer .box .momey {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-content: space-between;
  align-content: space-between;
  font-size: 0.63rem;
  color: #d11463;
}
.footer .box .momey .freight {
  font-size: 0.36rem;
}
.footer .box .buy {
  width: 2.76rem;
  height: 1.14rem;
  border-radius: 0.12rem;
  font-size: 0.54rem;
  color: #fff;
  border-radius: 0.1rem;
  background: #333;
}
.okbuy {
  background-color: #d11463 !important;
}

.cancel-info {
  margin-top: 0.62rem;
  font-size: 0.42rem;
  text-align: left;
  height: 5rem;
}
.info-center {
  text-align: center;
}
.pop-footer-btns .pop-footer-close {
  width: 5.01rem;
  height: 1.08rem;
  background-color: #d11463;
  border-radius: 2rem;
  color: #fff;
  font-size: 0.54rem;
}
.jiage {
  position: absolute;
  left: 2.5rem;
  top: 1.7rem;
}
.number {
  position: absolute;
  right: 0.5rem;
  top: 1.7rem;
}
.Deposit {
  background: #fff;
  padding-top: 0.58rem;
  padding-bottom: 0.58rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.42rem;
}
.ding,
.wei {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.wei {
  margin-top: 0.5rem;
}
.ding span:nth-child(2) i {
  color: #d11463;
  font-style: normal;
}
.myNumber {
  background: #fff;
  padding: 0.56rem 0.5rem;
  display: flex;
  font-size: 0.42rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}
.Agreement {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 1.09rem;
  width: 100%;
  background: #fff;
  /* position: fixed;
  bottom: 1.5rem; */
  border-top: 1px solid #ccc;
  padding: 0.38rem 0;
}
.iconBox {
  height: 0.6rem;
  padding: 0.38rem 0.45rem;
}
.icon {
  width: 0.5rem;
  height: 0.5rem;
  background: url("../../assets/img/nogou.png") 0/100% 100%;
  /* float: left;
  margin-bottom: 1rem;
  margin-right: 0.2rem; */
  /* position: absolute;
  top: 0.5rem; */
}
.yesIcon {
  background: url("../../assets/img/yesIcon.png") 0/100% 100%;
}
.text {
  font-size: 0.42rem;
}
.text p span {
  text-decoration: underline;
}
.text p:nth-child(2) {
  font-size: 0.36rem;
}
</style>

